<template>
  <div class="ele-body">
    <div class="topBox flex">

      <div class="topLeft">

        <div class="topLeftL">
          <div class="topLeftLT">
            <div >本月派单量</div>
            <div >目标值 &nbsp;&nbsp; 600&nbsp;&nbsp;实际值 &nbsp;&nbsp; 450</div>
          </div>
          <div class="topLeftLB">
            <div class="topLeftLBItem">
              <div >56</div>
              <div >生产基地</div>
            </div>
            <div class="topLeftLBItem">
              <div >56</div>
              <div >服务网点</div>
            </div>
            <div class="topLeftLBItem">
              <div >56</div>
              <div >供应商</div>
            </div>
          </div>
        </div>
        <div class="topLeftR" id="topLeftR" >
        </div>
      </div>
      <div class="topRight" id="topRight"></div>
    </div>
    <div class="middleBox">
      <div id="middleChart" class="middleChart"></div>
    </div>
    <div class="bottomBox">
      <div id="bottomChart" class="bottomChart"></div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column width="180">
          1
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  props: ['activeName'],
  data() {
    return {
      echartsGroup: [],
      styleKey: {
        'BC类总体满足率': {bg: '#e4f4ef', fc: '#1fa881'},
        '4小时到位率': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时完工率': {bg: '#fff5d6', fc: '#fed13b'},
        '30天交货率': {bg: '#f5f5f5', fc: '#c5c5c5'}
      },
      BottomStyle: {
        '本月申请单': {bg: '#e4f4ef', fc: '#1fa881'},
        '本月未发单': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时签收率': {bg: '#fff5d6', fc: '#fed13b'},
        '48小时签收率': {bg: '#f5f5f5', fc: '#c5c5c5'},
        '7天签收率': {bg: '#f5f5f5', fc: '#c5c5c5'}
      },
      topData: [
        {
          title: 'BC类总体满足率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '销售产品', url: '#'},
            {title: '销售税条件', url: '#'},
            {title: '销售合计', url: '#'}
          ]
        },
        {
          title: '4小时到位率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
        {
          title: '24小时完工率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
      ],
      bottomData: [
        {
          title: '本月申请单',
          target: '1500'
        },
        {
          title: '本月未发单',
          target: '90%'
        },
        {
          title: '24小时签收率',
          target: '90%'
        },
        {
          title: '48小时签收率',
          target: '90%'
        },
        {
          title: '7天签收率',
          target: '90%'
        },
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, ]
    }
  },
  activated() {
    this.init()
    document.querySelector(".ele-admin-content-view").style.height = "100%"
    this.refresh = true
  },
  deactivated() {
    document.querySelector(".ele-admin-content-view").style.height = "auto"
  },
  methods: {
    init() {
      window.addEventListener("resize", this.resizeList)
      this.$once('hook:beforeDestroy', function () {
        window.removeEventListener('resize', this.resizeList)
      })
    },
    resizeList() {
          if (this.echartsGroup?.length > 0) {
            this.echartsGroup.forEach(item => {
              item.resize()
            })
          }
    },
    initTopLeftChart() {
      const chartDom = document.getElementById('topLeftR');
      let myChart1 = echarts.init(chartDom);
      this.echartsGroup.push(myChart1)
      let option;

      option = {
        color:['#065fe5','#ffd10f'],  //外环颜色数组
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom:'2%',
          left: 'center',
          itemHeight: 10, // 修改icon图形大小
          itemGap: 4, // 修改间距
          textStyle: {
            fontSize: 10,
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 735, name: '未完成' },
              { value: 150, name: '已完成' },
            ]
          }
        ]
      };

      option && myChart1.setOption(option);

    },
    initTopRightChart() {
      const chartDom = document.getElementById('topRight');
      let myChart2 = echarts.init(chartDom);
      this.echartsGroup.push(myChart2)
      let option;

      option = {
        color:['#065fe5','#ffd10f'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        title:{
          text:'派工量占比明细'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['技术整改', '保外维修', '首次保修']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '技术整改',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value ;
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '保外维修',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value ;
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: '首次保修',
            type: 'line',
            yAxisIndex: 1,
            color:'#36e3c5',
            tooltip: {
              valueFormatter: function (value) {
                return value +'%';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
      option && myChart2.setOption(option);

    },
    initMiddleChart() {
      const chartDom = document.getElementById('middleChart');
      let myChart3 = echarts.init(chartDom);
      this.echartsGroup.push(myChart3)

      let option;
      option = {
        color:['#065fe5','#ffd10f'],
        title: {
          text: ' 派工量趋势对比'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'Highest',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
          },
          {
            name: 'Lowest',
            type: 'line',
            data: [10, 10, 15, 10, 11, 8, 10],
          }
        ]
      };
      option && myChart3.setOption(option);

    },
    initBottomChart() {
      const chartDom = document.getElementById('bottomChart');
      let myChart4 = echarts.init(chartDom);
      this.echartsGroup.push(myChart4)
      let option;

      option = {
        color:['#065fe5','#35e2c3'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        title:{
          text:'本月保有量&接单量'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['保有量', '接单量', '人均保有量', '人均接单量']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '保有量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value ;
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '接单量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value ;
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: '人均保有量',
            type: 'line',
            yAxisIndex: 1,
            color:'#ffc531',
            tooltip: {
              valueFormatter: function (value) {
                return value+'%';
              }
            },
            data: [25, 26, 30, 4, 6, 16,42]
          },
          {
            name: '人均接单量',
            type: 'line',
            yAxisIndex: 1,
            color:'#36e3c5',
            tooltip: {
              valueFormatter: function (value) {
                return value +'%';
              }
            },
            data: [ 63, 10, 20, 23, 23, 12,17]
          },
        ]
      };
      option && myChart4.setOption(option);

    },

  },
  mounted() {
    this.init()
    this.initTopLeftChart()
    this.initTopRightChart()
    this.initMiddleChart()
    this.initBottomChart()
  }
};
</script>
<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.ele-body {
  font-size: px2vh(16);
  display: flex;
  justify-content: center;
  flex-direction: column;
  //background-color: ;
}

.flex {
  display: flex;
  box-sizing: border-box;
  margin-top: px2vh(10);

  > div:first-child {
    width: 50%;
    height: px2vh(267);
    background-color: #fff;
    margin-right: px2vw(10);
    border-radius: px2vw(10);
  }

  > div:nth-child(2) {
    width: 50%;
    height: px2vh(267);
    background-color: #fff;
    border-radius: px2vw(10);
  }
}

.topBox {
  .topLeft {
    font-size: px2vh(14);
    box-sizing: border-box;
    padding: 0 px2vw(20);
    display: flex;
    align-items: center;
    .topLeftL {
      color: white;
      border-radius: px2vh(10);
      box-sizing: border-box;
      padding: 20px;
      width: 50%;
      height: 80%;
      background: #6ab7ff;
      .topLeftLT{
        >div{
          margin-bottom: px2vh(30);
        }
      }
      .topLeftLB {
        height: 50%;
        display: flex;
        justify-content: space-around;
        .topLeftLBItem{
          border-radius: px2vh(10);
          background: #97ccff;
          width: 30%;
          margin-right: 3%;
          height: 80%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-direction: column;
        }
      }
    }

    .topLeftR {
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: px2vh(10) px2vw(10);
    }
  }

  .topRight {
    box-sizing: border-box;
    padding: px2vh(10) px2vw(10);
  }
}

.middleBox{
  box-sizing: border-box;
  padding: px2vh(20) px2vw(40);
  background-color: #fff;
  border-radius: px2vw(10);
  height: px2vh(300);
  margin-top: px2vh(10);
  .middleChart{
    height: 100%;
  }
}
.bottomBox{
  width: 100%;
  margin-top: px2vh(10);
  height: px2vh(500);
  padding: px2vh(20) px2vw(40);
  background-color: #fff;
  border-radius: px2vw(10);
  .bottomChart{
    width: 100%;
    height: 70%;
  }
}
</style>
